<template>
  <div class="main">
    <div class="top">
      <div class="title flx-row">
        <img src="./../../static/img/logo.png" alt="">
        <div>{{ $t('lang.common_hostname') }}</div>
      </div>
      <div class="detail">此处省略对管理后台的描述~</div>
    </div>
    <div class="login">
      <el-input v-model="username" class="item1" size="large" prefix-icon="el-icon-user" placeholder="账户:1" />
      <el-input v-model="password" class="item2" size="large" :type="inputType" prefix-icon="el-icon-lock" placeholder="密码:1">
        <i slot="suffix" :class="['iconfont', lookPwd ? 'icon-yanjing' : 'icon-yanjing1']" @click="lookAction" />
      </el-input>
    </div>
    <div class="tool flex">
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <a href="javascript:;">忘记密码</a>
    </div>
    <el-button class="login-btn" size="large" :loading="loading" type="primary" @click="loginAction">登 录</el-button>
    <div class="extend flex">
      <div class="flex">
        <div>其他登录方式</div>
        <i class="iconfont icon-zhifubao1" />
        <i class="iconfont icon-taobao" />
        <i class="iconfont icon-weibo" />
      </div>
      <a href="javascript:;">注册账户</a>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      username: '',
      password: '',
      lookPwd: true,
      checked: false,
      loading: false,
      inputType: 'password'
    }
  },
  computed: {},
  created() {},
  mounted() {
  },
  methods: {
    loginAction() {
      if (!this.username) {
        this.$message.error('请输入用户名')
        return
      }
      if (!this.password) {
        this.$message.error('请输入密码')
        return
      }
      this.loading = true
      setTimeout(() => {
        this.loading = false
        localStorage.setItem('collapse', false)
        this.$api.post('/user/Login', { name: this.username, password: this.password }, r => {
          console.log('打印登录结果----', r)
          if (r.flag) {
            if (r.data !== 'admin') {
              this.$store.commit('setting/changeRole', 'other')
            }
            this.$api.post('/data/authData', { role: r.data }, r => {
              console.log('打印权限路由返回结果----', r)
              if (r.flag) {
                this.$store.commit('auth/changeAuthData', r.data)
                if (r.data.lv1.length === 0 && r.data.lv2.length === 0 && r.data.lv3.length === 0) {
                  this.$message.error('没有登录权限')
                } else {
                  this.$router.replace('./home')
                }
              }
            })
          }
        })
      }, 500)
    },
    lookAction() {
      this.lookPwd = !this.lookPwd
      if (!this.lookPwd) {
        this.inputType = 'text'
      } else {
        this.inputType = 'password'
      }
    }
  }
}
</script>
<style lang="scss" scoped>

.main{
  width: 100%;
  min-height: 100vh;
  background: #f0f2f5 url('./../../static/svg/background.svg') no-repeat 50%;
  background-size: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  .top{
    margin-top: 70px;
    text-align: center;
    .title{
      font-size: 33px;
      color: rgba(0,0,0,.85);
      font-weight: 600;
      img{
        width: 47px;
        margin-right: 16px;
      }
    }
    .detail{
      font-size: 14px;
      margin-top: 12px;
      margin-bottom: 40px;
      color: rgba(0,0,0,.45);
    }
  }
  .login{
    display: flex;
    flex-direction: column;
    .item2{
      width:368px;
      .icon-yanjing1{
        font-size: 16px;
        line-height: 40px;
        margin-right: 5px;
      }
      .icon-yanjing{
        @extend .icon-yanjing1;
      }
    }
    .item1{
      @extend .item2;
      margin-bottom:24px
    }
  }
  .tool{
    width: 368px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .login-btn{
    width: 368px;
    margin-bottom: 30px;
  }
  .extend{
    width: 368px;
    font-size: 14px;
    .icon-style{
      font-size: 24px;
      color: rgba(0,0,0,.2);
      margin-left: 10px;
      cursor: pointer;
    }
    .icon-zhifubao1{
      @extend .icon-style;
    }
    .icon-zhifubao1:hover{
      color: rgb(53, 136, 245);
    }
    .icon-taobao{
      @extend .icon-style;
    }
    .icon-taobao:hover{
      color: rgb(255, 94, 0);
    }
    .icon-weibo{
      @extend .icon-style;
    }
    .icon-weibo:hover{
      color: rgb(250, 15, 15);
    }
  }
}
</style>
